<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影列表</el-breadcrumb-item>
         <el-breadcrumb-item>剧照管理</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider content-position="left">剧照列表</el-divider>
     <div v-if="thumbList" >
        <div v-for="item in thumbList" :key="item.id" class="thumb-item">
        <el-image
        style="width:160px;height:120px;box-shadow:#0003 5px 5px 5px 0px;margin:10px 20px 0px 0px;"
        :src='item.url'
        fit='cover'
        > 
        </el-image>
        <i class="el-icon-error" @click="dateleThumb(item.id)"></i>
         </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                movie_id:this.$route.params.movie_id,
                thumbList:null,
            }
        },
        methods: {
            dateleThumb(id){
           const h = this.$createElement;
          this.$msgbox({
          title: '删除剧照',
          message: h('p', null, [
            h('span', null, '确认要删除该剧照吗？ '),
            h('i', { style: 'color: teal' })
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '正在删除...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 800);
            } else {
              done();
            }
          }
        }).then(action => {
            this.$http.moviethumb.delete({id:id}).then(res => {
                if(res.data.code == 200){
                    this.$message({
                      type: 'success',
                       message:'删除成功', 
                 });   
                  this.ThumbList()
                }
            })    
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        })
            },
           ThumbList(){
            this.$http.moviethumb.list({movie_id:this.movie_id}).then(res => {
                console.log(res)
                this.thumbList = res.data.data
            })
           } 
       },
       mounted () {
        this.ThumbList()
       },
    }
</script>

<style>
  .thumb-item{
    display: inline-block;
    position: relative;
    font-size: 1.3em;
  }
  .thumb-item i{
    position: absolute;
    top: 0px;
    right: 10px;
    display: none;
  }
  .thumb-item:hover i{
    display: block;
  }
</style>